<template>
  <el-table :data="tableData" stripe style="width: 100%">
    <el-table-column
      v-for="(row, index) in tableSetting"
      :key="index + '1'"
      :prop="row.value"
      :label="row.label"
      width="180"
    ></el-table-column>
  </el-table>
</template>

<script>
import { mapState } from 'vuex'

export default {
  data() {
    return {
      tableData: [
        {
          date: "2011-05-02",
          name: "张三",
          address: "北京",
        },
        {
          date: "2012-05-02",
          name: "李四",
          address: "上海",
        },
        {
          date: "2013-05-02",
          name: "王五",
          address: "广州",
        },
        {
          date: "2014-05-02",
          name: "赵六",
          address: "深圳",
        },
      ],
    };
  },
  computed: {
    ...mapState ('tableStore',{
        tableSetting: state => state.tableSetting
    })
  }
};
// tips:
// element中写到：doLayout方法 对Table进行重新布局。当Table或其祖先元素由隐藏切换为显示时，可能需要调用此方法
//  this.$refs['table'].doLayout();
</script>
<style lang="less" scoped>
// 可防止列切换的时候解决抖动问题
::v-deep.el-table .cell{
  height:20px!important;
}
</style>